<meta title="添加素材" width="800px"/>
<form s="valid,form,nda,datac"
      id="form" class="form-horizontal"
      method="put"
      action="api/article">
    <table class="table">
        <tr>
            <td style="width: 100px" class="text-right">内容</td>
            <td>
                <textarea class="form-control" name="content" id="content" s-valid-error="require()" style="height: 250px;"></textarea>
            </td>
        </tr>
        <tr>
            <td class="text-right">素材图片</td>
            <td>
                <div s="loop" id="picList" class="pic-list clearfix">
                    <div class="pic-list-item" s-loop-role="row" s="row,tpl">
                        <img src="{%=this%}" />
                        <a href="javascript:;" class="del-btn fa fa-remove" s-click="del(this)"></a>
                    </div>
                </div>
                <input autocomplete="off" type="button" class="btn btn-info btn-outline btn-sm" s-click="selectPic()" value="添加图片" />
            </td>
        </tr>
    </table>
</form>
<style>
    .pic-list {

    }
    .pic-list-item {
        width: 100px;
        height: 100px;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #eee;
        text-align: center;
        position: relative;
    }
    .pic-list-item img {
        max-width: 100%;
        max-height: 100%;
    }
    .del-btn {
        width: 20px;
        height: 20px;
        color: #ffffff;
        background-color: #fb4748;
        text-align: center;
        line-height: 20px;
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>
<script type="text/javascript">
    S.meta.btns = [
        {
            name: "保存",
            style: "btn btn-primary",
            click: function() {
                $form.validate().done(function(){
                    var picList = []
                    $picList.node.find("img").each(function() {
                        picList.push($(this).attr("src"))
                    })
                    S.post("/api/article", {picList: picList, content: $content.node.val()}).done(function() {
                        S.close(true);
                    })
                })
            }
        },
        {
            name: "关闭",
            style: "btn btn-default",
            click: function() {
                S.close();
            }
        }
    ]

    function del($this) {
        $this.parent().node.remove()
    }

    function selectPic() {
        S.popupOpen("/oss/objects-selector.html", {prefix: 'article'}).done(function(datas) {
            if(datas) {
                var list = []
                $.each(datas, function() {
                    list.push(this.url)
                })
                $picList.addRows(list)
            }
        })
    }

</script>